<template>
	<view class="body" :style="{height: wh + 'px'}">
		<view class="visit-info-list" v-for="(item, i) in ticketList" :key="i">
			<view class="visit-info-box" @click="gotoDetail(item)">
				<view class="order-box" :style="{width: (ww - 30) + 'px'}">
					<view class="order-id">
						订单：{{item.orderId}}
					</view>
					<view class="finish">
						<view class="notfinished" v-if="!item.finished" :style="{backgroundColor: red}">未完成</view>
						<view class="isfinished" v-else :style="{backgroundColor: springgreen}">已完成</view>
					</view>
				</view>
				<view class="info-detail-box">
					<view class="info-item">联系信息：{{item.visitorName}}</view>
					<view class="info-item">参观时间：{{item.exhibitionTime}}</view>
					<view class="info-item">门票数量：{{item.ticketCount}}</view>
					<view class="info-item">参观展区：{{item.exhibitionAddress}}</view>
				</view>
			</view>
		</view>
		<view class="none-data">没有更多数据了</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// ticketList: [
				// 	{
				// 		username: '张三',
				// 		time: '2023-10-30 13:00-16:00',
				// 		ticketCount: 1,
				// 		place: '南汉二陵博物馆',
				// 		orderId: '134123456789',
				// 		isFinished: false,
				// 	},
				// 	{
				// 		username: '张三',
				// 		time: '2023-10-30 13:00-16:00',
				// 		ticketCount: 1,
				// 		place: '南汉二陵博物馆',
				// 		orderId: '134123456788',
				// 		isFinished: true,
				// 	},
				// ],
				ticketList: [],
				//设备属性
				sysInfo: {},
				wh: 0,
				ww: 0
			
			};
		},
		methods: {
			gotoDetail(item) {
				uni.navigateTo({
					url: './../qrCode/qrCode?orderId=' + item.orderId,	
				})
			},
			//设置屏幕高度
			setSysInfo() {
				const sysInfo = uni.getSystemInfoSync()
				this.sysInfo = sysInfo
				this.wh = sysInfo.windowHeight 
				this.ww = sysInfo.windowWidth 
			},
			async setTicketList() {
				const visitor = JSON.parse(uni.getStorageSync('personInfo') || '{}')
				
				//此时游客还没实名信息
				if(Object.keys(visitor).length === 0) {
					return
				}
				
				const {data: res} = await uni.$http.get('/orders/listByVisitorId?visitorIdCard=' + visitor.visitorIdCard)
				// console.log("票的信息列表：", res)
				if(res.msg !== 'success') return uni.$showMsg('数据加载失败')
				
				const dataList = res.listByVisitorId
				dataList.forEach(x => x.visitorName = visitor.visitorName)
				// console.log("设置好的数据：", dataList)
				this.ticketList = dataList
			}
		},
		onLoad() {
			this.setSysInfo()
			this.setTicketList()
		},
	}
</script>

<style lang="scss">
.body {
	//高度要适配
	// height: 650px;
	// background-color: #f4f4f4;
	.visit-info-list {	
		background-color: white;
		display: flex;
		padding: 10px;
		margin: 10px;
	
		
		//订单id盒子样式
		.order-box {
			//宽度要适配
			// width: 350px;
			display: flex;
			justify-content: space-between;
			.finish {
				width: 70px;
				text-align: right;
				font-size: 15px;
				color: white;
				border-radius: 50rpx 0 0 50rpx;
				margin-bottom: 20px;
				.isfinished {
					background-color: springgreen;
				}
				.notfinished {
					background-color: red;
				}
				
			}
		}
	
		//详细信息
		.info-detail-box {
			.info-item {
				margin-bottom: 5px;
			}
		}
	}
	
	.none-data {
		display: flex;
		justify-content: center;
		margin: 10px;
	}
}
</style>
